<template>
  <el-form label-position="top" :model="form" :rules="formRules" ref="form">
    <el-form-item :label="$t('billing.achAccount')" prop="firstName">
      <el-input v-model="form.firstName"></el-input>
    </el-form-item>
    <el-form-item :label="$t('billing.achNumber')" prop="accountNumber">
      <el-input v-model="form.accountNumber"></el-input>
    </el-form-item>
    <el-form-item :label="$t('billing.achRouting')" prop="routingNumber">
      <el-input v-model="form.routingNumber"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'addBankForm',
  props: ['bankForm'],
  data () {
    return {
      form: this.bankForm,
      formRules: {
        firstName: [
          { required: true, message: 'Please Input', trigger: 'blur' },
        ],
        accountNumber: [
          { required: true, message: 'Please Input', trigger: 'blur' },
        ],
        routingNumber: [
          { required: true, message: 'Please Input', trigger: 'blur' },
        ],
      },
    }
  },
  watch: {
    form (val) {
      this.$emit('setAddress', val)
    }
  },
  methods: {
    submit() {
      return this.$refs['form'].validate();
    },
    resetForm() {
      this.$refs['form'].resetFields();
    }
  },
}
</script>

<style scoped>

</style>
